<template>
  <DetailsFormBox :title="dataInfo?.table?.title" :type="data.type" :form="data.form" :btns="[
    {
      title: '重置',
      icon: '',
      type: '',
      click: getForm,
    },
    {
      title: '保存',
      icon: '',
      type: 'primary',
      click: (form: any) => {
        saveBtn(form)
      },
    },
  ]" :loading="data.loading" :json="dataInfo">
    <template #default="{ form }">
      <div class="formMain">
        <ElFormItemBox label="模版编号" :prop="`templateTypeCode`">
          <ElInputBox :data="form.templateTypeCode" disabled placeholder="系统自动生成" />
        </ElFormItemBox>
        <ElFormItemBox label="模板类型" :prop="`templateTypeCode`" isRules>
          <ElSelectBox :data="form" dataName="templateTypeCode" :options="data.templateTypeList" @changeBtn="(value: any, row: any, arr: any) => {
            form.templateName = arr[0]?.label || ''
          }" />
        </ElFormItemBox>
        <ElFormItemBox label="模板文件" :prop="`templateFilePath`" isRules>
          <ElInputUploadBox :data="form" dataName="templateFilePath" @changeBtn="(files: any, dataInfo: any) => {
            dataInfo.loading = false
            form.templateFilePath = files.fileUrl
          }" />
        </ElFormItemBox>
        <ElFormItemBox label="模板名称" :prop="`templateName`" isRules>
          <ElInputBox :data="form" dataName="templateName" />
        </ElFormItemBox>
        <ElFormItemBox label="模板使用" :prop="`templateUseType`" isRules>
          <ElRadioBox :data="form" dataName="templateUseType" :options="[
            {
              label: '企业自用',
              value: 0
            },
            {
              label: '客户专用',
              value: 1
            }
          ]" />
        </ElFormItemBox>
        <ElFormItemBox label="使用客户" :prop="`customerCode`" :isRules="form.templateUseType === 1"
          v-if="form.templateUseType === 1">
          <ElSelectBox :data="form" dataName="customerCode" :options="options.client" />
        </ElFormItemBox>
        <ElFormItemBox label="启用状态" :prop="`isDisable`">
          <ElSwitchBox :data="form" dataName="isDisable" v-bind="{
            'inactive-value': 1,
            'active-value': 0
          }" />
        </ElFormItemBox>
        <ElFormItemBox label="备注" :prop="`remark`">
          <ElInputBox :data="form" dataName="remark" type="textarea" />
        </ElFormItemBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { useListComponent } from '../pageTs'; // 引入逻辑
import { reactive, onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const { dataInfo, options } = useListComponent();
const data = reactive({
  loading: false,
  loadingMsg: '',
  type: '2',
  form: {
    printTemplateCode: "", // 模板编号
    templateName: "", // 模板名称
    templateTypeCode: "", // 模板类型编号
    templateUseType: 0, // 使用类型 0企业自用 1客户专用
    customerCode: "", // 客户编号
    templateFilePath: "", // 模板文件路径
    isDisable: 0, // 启用状态 0启用 1禁用
    remark: "", // 备注
    printWidth: 0.0, // 打印宽度
    printHeight: 0.0 // 打印高度
  },
  templateTypeList: []
});
import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();

import { sendMsg } from '@/utils/crossTagMag.ts';
const saveBtn = (form: any) => {
  let _form: any = {
    ...form
  }
  if (form.id) {
    proxy.$api.System.UpdatePrintTemplate(_form)
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  } else {
    proxy.$api.System.AddPrintTemplate({
      ..._form,
    })
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  }

  function _sun() {
    proxy.$message('保存成功')
    sendMsg('save', true);
    // getForm()
    window.close();
  }
};
const getForm = () => {
  let _query: any = route.query
  if (_query.id) {
    proxy.$api.System.GetSinglePrintTemplate({
      queryBy: 1,//获取数据方式：1通过主键；2通过唯一识别码	
      queryValue: _query.id,//获取数据传递的查询参数值（主键ID或唯一识别码）
    })
      .then((res: any) => {
        proxy.$message('获取成功')
        data.form = {
          ...res,
        }
      })
      .catch(() => {
      });
  }

};

// 文件列表
const getTemplateTypeList = () => {
  proxy.$api.System.GetTemplateTypeList().then((res: any) => {
    data.templateTypeList = res.map((el: any) => ({
      label: el.templateTypeName,
      value: el.templateTypeCode,
    }));
  });
};
import { getClient } from '@/utils/optionsArr.ts';
onMounted(() => {
  getForm();
  getTemplateTypeList();
  getClient(options, 'client') //获取所有客户
});
</script>
